.v-spin-wrap {
  position: relative;
  content-visibility: auto;
  .spin-popper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
    flex-direction: column;
    content-visibility: auto;
    .loading__text {
      padding-top: 5px;
      color: $--color-primary;
      opacity: 0.8;
    }
    .loading__text--default {
      font-size: 13px;
    }
    .loading__text--small {
      font-size: 12px;
    }
    .loading__text--large {
      font-size: 14px;
    }

    .spinner-dot {
      transform: rotate(45deg);
      animation: antRotate 1.2s infinite linear;
      position: relative;
      display: inline-block;
      background: transparent;
      content-visibility: auto;
      i {
        border-radius: 100%;
        background-color: $--color-primary;
        transform: scale(0.75);
        display: block;
        position: absolute;
        opacity: 0.4;
        animation: antSpinMove 1s infinite linear alternate;
        transform-origin: 50% 50%;
        &:nth-child(1) {
          left: 0;
          top: 0;
        }
        &:nth-child(2) {
          right: 0;
          top: 0;
          animation-delay: 0.4s;
        }
        &:nth-child(3) {
          right: 0;
          bottom: 0;
          animation-delay: 0.8s;
        }
        &:nth-child(4) {
          left: 0;
          bottom: 0;
          animation-delay: 1.2s;
        }
      }
      @keyframes antSpinMove {
        to {
          opacity: 1;
        }
      }
      @keyframes antRotate {
        to {
          transform: rotate(405deg);
        }
      }
      &.spinner-dot--default {
        width: 20px;
        height: 20px;
        i {
          width: 9px;
          height: 9px;
        }
      }
      &.spinner-dot--small {
        width: 14px;
        height: 14px;
        i {
          width: 6px;
          height: 6px;
        }
      }
      &.spinner-dot--large {
        width: 32px;
        height: 32px;
        i {
          width: 14px;
          height: 14px;
        }
      }
    }

    .spinner-rect {
      position: relative;
      display: inline-block;
      background: transparent;
      .cube1,
      .cube2 {
        background-color: $--color-primary;
        position: absolute;
        top: 0;
        left: 0;
        margin-left: -20px;
        margin-top: -20px;
        animation: cubemove 1.8s infinite ease-in-out;
      }

      .cube2 {
        animation-delay: -0.9s;
      }

      @-webkit-keyframes cubemove {
        25% {
          -webkit-transform: translateX(28px) rotate(-90deg) scale(0.5);
        }
        50% {
          -webkit-transform: translateX(28px) translateY(28px) rotate(-180deg);
        }
        75% {
          -webkit-transform: translateX(0px) translateY(28px) rotate(-270deg) scale(0.5);
        }
        100% {
          -webkit-transform: rotate(-280deg);
        }
      }

      @keyframes cubemove {
        25% {
          transform: translateX(28px) rotate(-90deg) scale(0.5);
        }
        50% {
          transform: translateX(28px) translateY(28px) rotate(-179deg);
        }
        50.1% {
          transform: translateX(28px) translateY(28px) rotate(-180deg);
        }
        75% {
          transform: translateX(0px) translateY(28px) rotate(-270deg) scale(0.5);
        }
        100% {
          transform: rotate(-280deg);
        }
      }

      &.spinner-rect--default {
        width: 20px;
        height: 20px;
        .cube1,
        .cube2 {
          width: 10px;
          height: 10px;
        }
      }

      &.spinner-rect--small {
        width: 14px;
        height: 14px;
        .cube1,
        .cube2 {
          width: 8px;
          height: 8px;
        }
      }

      &.spinner-rect--large {
        width: 26px;
        height: 26px;
        .cube1,
        .cube2 {
          width: 12px;
          height: 12px;
        }
      }
    }

    .spinner-circle {
      width: 30px;
      height: 30px;
      animation: loading-rotate 2s linear infinite;
      @keyframes loading-rotate {
        100% {
          -webkit-transform: rotate(1turn);
          transform: rotate(1turn);
        }
      }
      .path {
        stroke-width: 4;
        stroke-linecap: round;
        &.path-background {
          stroke: #d8dee1;
        }
        &.path-loading {
          animation: loading-dash 1.5s ease-in-out infinite;
          stroke-dasharray: 90, 150;
          stroke-dashoffset: 0;
          stroke: $--color-primary;
        }
      }
      &.spinner-circle--default {
        width: 30px;
        height: 30px;
      }
      &.spinner-circle--small {
        width: 22px;
        height: 22px;
      }
      &.spinner-circle--large {
        width: 38px;
        height: 38px;
      }
    }

    .spinner-circular {
      height: 42px;
      width: 42px;
      animation: loading-rotate 2s linear infinite;
      .path {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: $--color-primary;
        stroke-linecap: round;
      }
      &.spinner-circular--default {
        width: 30px;
        height: 30px;
      }
      &.spinner-circular--small {
        width: 22px;
        height: 22px;
      }
      &.spinner-circular--large {
        width: 40px;
        height: 40px;
      }
    }
  }

  .spin-popper--mask {
    clear: both;
    overflow: hidden;
    opacity: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    background-color: hsla(0, 0%, 100%, 0.7);
    transition: all 300ms;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1950;
  }
}
